<template>
  <div class="userInfo">
    <el-form :model="ruleForm"
             ref="ruleForm"
             label-width="100px"
             class="demo-dynamic">

      <!-- 头像 -->
      <el-form-item
          label="头像"
          prop="avatar"
          :rules="[{ required: true, trigger: 'blur' }]">
        <el-upload class="avatar-uploader"
                   action="#"
                   ref="upload"
                   :http-request="uploadImg"
                   :show-file-list="false"
                   accept="JPG, .PNG, .JPEG,.jpg, .png, .jpeg"
                   :multiple="false">
          <img v-if="ruleForm.avatar" :src="ruleForm.avatar" class="avatar"/>
          <i v-else class="el-icon-plus avatar-uploader-icon" size="mini"></i>
        </el-upload>
      </el-form-item>

      <!-- 昵称 -->
      <el-form-item
          style="width: 50%"
          label="昵称"
          prop="nickname"
          :rules="[
          { required: true, message: '请输入昵称', trigger: 'blur' },
          { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
        ]">
        <el-input v-model="ruleForm.nickname"></el-input>
      </el-form-item>

      <!-- 邮箱 -->
      <el-form-item
          style="width: 50%"
          prop="email"
          label="邮箱"
          :rules="[
      { required: true, message: '请输入邮箱地址', trigger: 'blur' },
      { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
    ]">
        <el-input v-model="ruleForm.email"></el-input>
      </el-form-item>

      <!-- 个人简介 -->
      <el-form-item
          style="width: 80%;"
          label="个人简介"
          prop="intro"
          :rules="[
          { required: false, message: '请输入个人简介', trigger: 'blur' },
          { min: 0, max: 150, message: '请注意长度不能超过150个字符', trigger: 'blur' }
        ]">
        <el-input type="textarea" v-model="ruleForm.intro"></el-input>
      </el-form-item>

      <!-- 提交 -->
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>

import {uploadFile} from "@/api";
import {updateUserInfo, getUserInfo} from "@/api/user";

export default {
  name: "userInfo",
  data() {
    return {
      ruleForm: {
        avatar: this.$store.state.userInfo.avatar,
        nickname: this.$store.state.userInfo.nickname,
        email: this.$store.state.userInfo.email,
        intro: this.$store.state.userInfo.intro,
      },
    };
  },
  methods: {
    uploadImg(file) {
      uploadFile(file.file).then(res => {
        this.ruleForm.avatar = res.data.storeUrl;
      }).catch(e => {
        console.log(e);
      })
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const data = {
            nickname: this.ruleForm.nickname,
            avatar: this.ruleForm.avatar,
            email: this.ruleForm.email,
            intro: this.ruleForm.intro
          }
          updateUserInfo(data).then(res => {
            if (res.code === 200) {
              this.$message.success('修改成功');
              getUserInfo().then(res1 => {
                if (res1.code === 200) {
                  this.$store.dispatch("setUserInfo", res1.data);
                }
              })
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    }
  }
}
</script>

<style scoped>
.userInfo {
  margin-top: 20px;
}

.avatar-uploader {
  border: 1px dashed #d9d9d9;
  border-radius: 50px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 100px;
  height: 100px;
}

.avatar-uploader:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  line-height: 100px;
  text-align: center;
}

.avatar {
  width: 100px;
  height: 100px;
  display: block;
  border-radius: 50%;
}
</style>
